<!-- 列表分类控件设置面板 -->
<template>
    <el-tabs modelValue="widget" stretch>
        <el-tab-pane :label="`${widget.widgetData.component.title}组件`" name="widget">
            <el-scrollbar>
                <!-- 组件风格 -->
                <new-classify-mode :widget="widget" />

                <!-- 关联设置 -->
                <new-classify-bind :widget="widget" />

                <!-- 分类列表 -->
                <row-content :widget="widget" />

                <el-collapse modelValue="1">
                    <el-collapse-item title="分类设置" name="1">
                        <layout-pane label="分类组件隐藏“全部”类">
                            <el-switch v-model="widget.widgetData.eles.customFeature.showAllClassify" />
                        </layout-pane>
                    </el-collapse-item>
                </el-collapse>
                
                <!-- 元素可见设置 -->
                <row-element-visible :widget="widget" />
            </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="组件样式" name="style">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="组件设置" name="1">
                        <layout-pane label="大小">
                            <si-input-number
                                :modelValue="widget.widgetData.eles.style.height"
                                @update:modelValue="val => {
                                    widget.widgetData.eles.style.height = val
                                    widget.widgetData.eles.style['line-height'] = val
                                }"
                                :min="0"
                                label="高度"
                                unit="px"
                            />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="位置">
                            <si-input-number
                                v-model="widget.widgetData.eles.style['margin-top']"
                                label="距上"
                                unit="px"
                            />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="颜色">
                            <si-color-picker
                                v-model="widget.widgetData.eles.style['background-color']"
                                label="背景色"
                                show-alpha
                            />
                        </layout-pane>

                        <!-- 透明 -->
                        <el-divider></el-divider>
                        <row-opacity :widget="widget" />

                        <template v-if="classifyType === 1">
                            <el-divider></el-divider>
                            <layout-pane label="下划线">
                                <el-switch v-model="widget.widgetData.eles.customFeature.isShowUnderLine" />
                            </layout-pane>

                            <template v-if="widget.widgetData.eles.customFeature.isShowUnderLine">
                                <el-divider></el-divider>
                                <layout-pane label="下划线长度">
                                    <si-input-number
                                        v-model="widget.widgetData.eles.classifyStyle.underLineWidth"
                                        :min="0"
                                        label="距上"
                                        unit="px"
                                    />
                                </layout-pane>
                            </template>
                        </template>

                        <template v-if="classifyType === 2">
                            <el-divider></el-divider>
                            <layout-pane label="分割线颜色">
                                <si-color-picker
                                    v-model="widget.widgetData.eles.classifyStyle.divideLineColor"
                                    show-alpha
                                />
                            </layout-pane>
                        </template>
                    </el-collapse-item>
                </el-collapse>

                <el-collapse modelValue="1">
                    <el-collapse-item title="文字设置" name="1">
                        <layout-pane label="颜色">
                            <si-color-picker
                                v-model="widget.widgetData.eles.style.color"
                                label="初始色"
                                show-alpha
                            />
                            <si-color-picker
                                v-model="widget.widgetData.eles.customFeature.selectedColor"
                                label="选中色"
                                show-alpha
                            />
                        </layout-pane>
                        
                        <el-divider></el-divider>
                        <layout-pane label="文字样式">
                            <si-font-style
                                v-model:fontSize="widget.widgetData.eles.style['font-size']"
                                v-model:fontWeight="widget.widgetData.eles.style['font-weight']"
                                v-model:fontStyle="widget.widgetData.eles.style['font-style']"
                            />
                        </layout-pane>

                        <template v-if="classifyType === 1">
                            <el-divider></el-divider>
                            <layout-pane label="选中文字">
                                <si-font-style
                                    v-model:fontSize="widget.widgetData.eles.classifyStyle.selectedFontSize"
                                    v-model:fontWeight="widget.widgetData.eles.classifyStyle.selectedFontWeight"
                                    v-model:fontStyle="widget.widgetData.eles.classifyStyle.selectedFontStyle"
                                    v-model:textDecoration="widget.widgetData.eles.classifyStyle.selectedTextDecoration"
                                />
                            </layout-pane>
                        </template>
                    </el-collapse-item>
                </el-collapse>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiInputNumber,
    SiFontStyle,
    SiColorPicker
} from '@/components/setting-pane/setting-item'
import {
    RowContent,
    RowOpacity,
    RowElementVisible
} from '../../widget-setting-row'
import NewClassifyMode from './components/new-classify-mode'
import NewClassifyBind from './components/new-classify-bind'
export default defineComponent({
    name: 'NewClassifySetting',
    components: {
        LayoutPane,
        SiInputNumber,
        SiFontStyle,
        SiColorPicker,
        RowContent,
        RowOpacity,
        RowElementVisible,
        NewClassifyMode,
        NewClassifyBind
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const classifyType = computed(() => widget.value.widgetData.eles.customFeature.classifyType)

        return {
            widget,
            classifyType
        }
    }
})
</script>
